import React, { Component } from "react";

// 只有类组件可以定义自己的state状态
// 函数组件不能定义state

class App extends Component {
  // 1. 字面量定义state
  // state = {
  //   name: "junjun",
  //   age: 40,
  // };

  // 2.使用构造函数的构造器来定义state
  // constructor在类被实例化的时候就会自动调用
  constructor() {
    super();
    // 调用super函数以后，才能使用this
    this.state = {
      name: "junjun",
      age: 40,
      show: false,
      list: ["zhangsan", "lisi", "wangwu"],
    };
  }

  render() {
    const { name, age, show, list } = this.state;
    return (
      <>
        <h2>state的定义</h2>
        <p>
          {name}的年龄是{age}
        </p>
        {/* 条件渲染用短路，或者三目 */}
        {/* {this.state.show ? <p>hello state</p> : null} */}
        {/* {show && <p>hello state</p>} */}
        <p style={{ display: show ? "block" : "none" }}>hello state</p>

        {/* 循环渲染使用map进行映射 */}
        <ul>
          {list.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </>
    );
  }
}

export default App;
